<template>
  <div class="alignment-guides">
    <!-- 垂直辅助线 -->
    <div
      v-for="line in verticalLines"
      :key="line.position"
      class="guide-line vertical"
      :style="{ left: `${line.position}px` }"
    />
    
    <!-- 水平辅助线 -->
    <div
      v-for="line in horizontalLines"
      :key="line.position"
      class="guide-line horizontal"
      :style="{ top: `${line.position}px` }"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useEditorStore } from '@/stores/editor';

const props = defineProps<{
  draggingRect: DOMRect | null;
}>();

const editorStore = useEditorStore();

interface GuideLine {
  position: number;
  type: 'center' | 'edge';
}

const SNAP_THRESHOLD = 5; // 吸附阈值（像素）

// 计算所有组件的边界位置
const componentBounds = computed(() => {
  return editorStore.canvasComponents
    .filter(comp => comp.id !== editorStore.draggingId)
    .map(comp => {
      const el = document.getElementById(comp.id);
      return el ? el.getBoundingClientRect() : null;
    })
    .filter(Boolean) as DOMRect[];
});

// 计算垂直对齐线
const verticalLines = computed(() => {
  if (!props.draggingRect) return [];
  
  const lines: GuideLine[] = [];
  const draggingCenter = props.draggingRect.left + props.draggingRect.width / 2;
  
  componentBounds.value.forEach(bound => {
    // 左边对齐
    if (Math.abs(props.draggingRect!.left - bound.left) < SNAP_THRESHOLD) {
      lines.push({ position: bound.left, type: 'edge' });
    }
    
    // 右边对齐
    if (Math.abs(props.draggingRect!.right - bound.right) < SNAP_THRESHOLD) {
      lines.push({ position: bound.right, type: 'edge' });
    }
    
    // 中心对齐
    const boundCenter = bound.left + bound.width / 2;
    if (Math.abs(draggingCenter - boundCenter) < SNAP_THRESHOLD) {
      lines.push({ position: boundCenter, type: 'center' });
    }
  });
  
  return lines;
});

// 计算水平对齐线
const horizontalLines = computed(() => {
  if (!props.draggingRect) return [];
  
  const lines: GuideLine[] = [];
  const draggingCenter = props.draggingRect.top + props.draggingRect.height / 2;
  
  componentBounds.value.forEach(bound => {
    // 顶部对齐
    if (Math.abs(props.draggingRect!.top - bound.top) < SNAP_THRESHOLD) {
      lines.push({ position: bound.top, type: 'edge' });
    }
    
    // 底部对齐
    if (Math.abs(props.draggingRect!.bottom - bound.bottom) < SNAP_THRESHOLD) {
      lines.push({ position: bound.bottom, type: 'edge' });
    }
    
    // 中心对齐
    const boundCenter = bound.top + bound.height / 2;
    if (Math.abs(draggingCenter - boundCenter) < SNAP_THRESHOLD) {
      lines.push({ position: boundCenter, type: 'center' });
    }
  });
  
  return lines;
});
</script>

<style lang="less" scoped>
.alignment-guides {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.guide-line {
  position: absolute;
  background-color: #1890ff;
  
  &.vertical {
    width: 1px;
    height: 100%;
  }
  
  &.horizontal {
    width: 100%;
    height: 1px;
  }
}
</style> 